import Image from "next/image";
import MobileLayout from "../components/layout/MobileLayout";
import styles from "./page.module.css";

export default function Home() {
  return (
    <MobileLayout>
      <div className={styles.homePage}>
        {/* 头部横幅 */}
        <div className={`${styles.banner} transition-all hover-shadow`}>
          <div className={`${styles.bannerContent}`}>
            <h1 className={`${styles.bannerTitle}`}>主题咖乐园™</h1>
            <div className={`${styles.bannerTag}`}>精彩放送</div>
          </div>
          <div className={`${styles.bannerImage}`}>
            <Image 
              src="/banner.svg" 
              alt="主题咖乐园" 
              width={375} 
              height={200} 
              priority
              className="transition-transform hover-scale"
            />
          </div>
        </div>

        {/* 功能导航 */}
        <div className={`${styles.navGrid}`}>
          <div className={`${styles.navItem} transition-all hover-lift hover-shadow`}>
            <div className={`${styles.navIcon}`}>
              <Image src="/icons/food.svg" alt="美食" width={24} height={24} className="transition-transform hover-scale" />
            </div>
            <div className={styles.navText}>美食</div>
          </div>
          <div className={`${styles.navItem} transition-all hover-lift hover-shadow`}>
            <div className={`${styles.navIcon}`}>
              <Image src="/icons/entertainment.svg" alt="娱乐" width={24} height={24} className="transition-transform hover-scale" />
            </div>
            <div className={styles.navText}>娱乐</div>
          </div>
          <div className={`${styles.navItem} transition-all hover-lift hover-shadow`}>
            <div className={`${styles.navIcon}`}>
              <Image src="/icons/sports.svg" alt="运动" width={24} height={24} className="transition-transform hover-scale" />
            </div>
            <div className={styles.navText}>运动</div>
          </div>
          <div className={`${styles.navItem} transition-all hover-lift hover-shadow`}>
            <div className={`${styles.navIcon}`}>
              <Image src="/icons/relax.svg" alt="休闲" width={24} height={24} className="transition-transform hover-scale" />
            </div>
            <div className={styles.navText}>休闲</div>
          </div>
          <div className={`${styles.navItem} transition-all hover-lift hover-shadow`}>
            <div className={`${styles.navIcon}`}>
              <Image src="/icons/qrcode.svg" alt="会员码" width={24} height={24} className="transition-transform hover-scale" />
            </div>
            <div className={styles.navText}>会员码</div>
          </div>
        </div>

        {/* 推荐服务 */}
        <div className={`${styles.section}`}>
          <div className={`${styles.sectionHeader}`}>
            <h2 className={`${styles.sectionTitle}`}>咖咖推荐</h2>
            <div className={`${styles.sectionMore} transition-all hover-scale`}>咖咖助手 &gt;</div>
          </div>
          <div className={`${styles.serviceGrid}`}>
            <div className={`${styles.serviceCard} transition-all hover-lift hover-shadow`}>
              <div className={`${styles.serviceImage}`}>
                <Image src="/services/service1.svg" alt="热点服务" width={150} height={100} className="transition-transform hover-scale" />
              </div>
              <div className={`${styles.serviceTitle}`}>热点服务</div>
              <div className={`${styles.serviceDesc}`}>千米优选特享</div>
            </div>
            <div className={`${styles.serviceCard} transition-all hover-lift hover-shadow`}>
              <div className={`${styles.serviceImage}`}>
                <Image src="/services/service2.svg" alt="主题电影" width={150} height={100} className="transition-transform hover-scale" />
              </div>
              <div className={`${styles.serviceTitle}`}>主题电影</div>
              <div className={`${styles.serviceDesc}`}>私人影院体验</div>
            </div>
          </div>
        </div>

        {/* 主题专区 */}
        <div className={`${styles.section}`}>
          <div className={`${styles.sectionHeader}`}>
            <h2 className={`${styles.sectionTitle}`}>主题专网</h2>
            <div className={`${styles.sectionDesc} transition-all hover-scale`}>网络畅游，不用担心消息延迟哦！</div>
          </div>
        </div>

        {/* 打咖圣地 */}
        <div className={`${styles.section}`}>
          <div className={`${styles.sectionHeader}`}>
            <h2 className={`${styles.sectionTitle}`}>打咖圣地</h2>
            <div className={`${styles.sectionMore} transition-all hover-scale`}>更多 &gt;</div>
          </div>
          <div className={`${styles.placeGrid}`}>
            <div className={`${styles.placeCard} transition-all hover-lift hover-shadow`}>
              <div className={`${styles.placeImage}`}>
                <Image src="/places/place1.svg" alt="摩天轮" width={180} height={120} className="transition-transform hover-scale" />
              </div>
            </div>
            <div className={`${styles.placeCard} transition-all hover-lift hover-shadow`}>
              <div className={`${styles.placeImage}`}>
                <Image src="/places/place2.svg" alt="摩天轮" width={180} height={120} className="transition-transform hover-scale" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </MobileLayout>
  );
}
